<template>
  <div
    class="flex-container"
    v-loading="loading"
    element-loading-text="正在重置密码，请稍后....."
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <div class="login_panel card">
      <div class="loginTitle">
        <h2>{{ $t("reset.title") }}</h2>
      </div>
      <div>
        <div class="form_height">
          <div class="form_tip">{{ $t("reset.mail_tip") }}</div>
        </div>
        <div class="login_form">
          <!-- 验证表单 -->
          <el-form
            :model="loginForm"
            :rules="rules"
            status-icon
            ref="loginForm"
            class="form_panel"
          >
            <div class="el-item">
              <el-form-item prop="username">
                <el-input
                  type="text"
                  v-model="loginForm.username"
                  autocomplete="off"
                  :placeholder="$t('reset.username')"
                >
                </el-input>
              </el-form-item>
            </div>
            <div class="el-item">
              <el-form-item prop="user_pass">
                <el-input
                  type="password"
                  v-model="loginForm.user_pass"
                  autocomplete="off"
                  :placeholder="$t('reset.pass')"
                >
                  <i slot="prefix" class="el-input__icon el-icon-lock"></i>
                </el-input>
              </el-form-item>
            </div>
            <div class="el-item">
              <el-form-item prop="checkPass">
                <el-input
                  type="password"
                  v-model="loginForm.checkPass"
                  autocomplete="off"
                  :placeholder="$t('reset.checkpass')"
                >
                  <i slot="prefix" class="el-input__icon el-icon-lock"></i>
                </el-input>
              </el-form-item>
            </div>
            <!-- 重置码 -->
            <div class="el-item">
              <el-form-item prop="user_code">
                <el-input
                  type="text"
                  v-model="loginForm.user_code"
                  autocomplete="off"
                  maxlength="6"
                  :placeholder="$t('reset.valicode')"
                >
                  <i slot="prefix" class="el-input__icon el-icon-tickets"></i>
                </el-input>
              </el-form-item>
            </div>
            <div class="el-item el-login-btn-panel">
              <div>
                <el-button
                  type="primary"
                  class="buttonWidth"
                  @click="submitForm('loginForm')"
                  >{{ $t("reset.btn") }}</el-button
                >
              </div>
            </div>
            <div class="loginBottom back_link">
              <router-link to="/login">{{ $t("reset.backlogin") }}</router-link>
            </div>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>
<script>

import { resetUserPass } from "@/api";

export default {
  name: "resetUserPass",
  data() {
    var validateUsername = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入用户名或者邮箱"));
      } else {
        callback();
      }
    };

    var validatePass = (rule, value, callback) => {
      //必须包含大小写字母、数字、特殊字符长度再9-16位之间
      var regex = new RegExp(
        "(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{8,16}"
      );

      if (value === "") {
        callback(new Error("请输入密码"));
      } else if (value.length < 8 || value.length > 16) {
        callback(new Error("请输入8~16位密码"));
      } else if (!regex.test(value)) {
        callback(
          new Error("密码必须同时包含字母、数字和特殊字符其中三项且至少8位")
        );
      } else {
        setTimeout(() => {
          if (this.loginForm.checkPass !== "") {
            //_self.$refs.loginForm.validateField("checkPass");
          }
        }, 1000);
        callback();
      }
    };

    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.loginForm.user_pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };

    var validateResetCode = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入验证码"));
      } else {
        setTimeout(() => {
          if (this.loginForm.reset_code !== "") {
            //_self.$refs.loginForm.validateField("invite_code");
          }
        }, 1000);
        callback();
      }
    };

    return {
      loginForm: {
        username: "",
        user_pass: "",
        checkPass: "",
        user_code: "",
      },
      rules: {
        username: [{ validator: validateUsername, trigger: "blur" }],
        user_pass: [{ validator: validatePass, trigger: "blur" }],
        checkPass: [{ validator: validatePass2, trigger: "blur" }],
        user_code: [{ validator: validateResetCode, trigger: "blur" }],
      },
      identifyCode: "", //随机组合字符串
      loading: false,
    };
  },
  mounted() {},
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //成功操作
          this.resetUserPass();
        } else {
          return false;
        }
      });
    },
    async resetUserPass() {
      this.loading = true;
      //
      let res = await resetUserPass(this.loginForm);
      if (res.state == 200) {
        this.$message({
          message: res.message,
          type: "success",
        });
        this.$router.push("/login");
      } else {
        this.$message.error(res.message);
        this.loading = false;
      }
    },
  },
};
</script>
  <style scoped>
/* 修改输入框默认自带的样式 */
/* /deep/ .el-form-item > div {
    margin-left: 0px !important;
  } */

.flex-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: url("../assets/img/bg01.jpg") center center no-repeat;
  background-size: cover;
  height: 100vh;
}

.login_panel {
  width: 360px;
}

.card {
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.2509803922);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transform: scale(1);
  transition: all 0.3s;
}

.loginTitle {
  text-align: center;
  color: #fff;
  margin: 30px 0;
}

.form_height {
  margin-bottom: 10px;
}

.form_tip {
  color: #fff;
  text-align: center;
  font-size: 14px;
}

.login_form {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.form_panel {
  width: 90%;
}

.buttonWidth {
  height: 42px;
  width: 100%;
  font-family: PingFangSC-Semibold;
  font-size: 18px;
  color: #ffffff;
  letter-spacing: 0;
  text-align: center;
  background-color: #f56c6c;
  border-color: #f56c6c;
}
.back_link {
  padding: 10px 0;
}

.back_link a {
  font-size: 12px;
  color: #ffffff;
  text-decoration: none;
}

.class_code {
  width: 50%;
  margin-right: 20px;
}

.code_panel {
  display: inline-block;
  cursor: pointer;
}

.code {
  vertical-align: top;
}
</style>